<template>
  <div class="navbar">
    <div class="logo">咖啡商城</div>
    <div class="nav-links">
      <router-link to="/">首页</router-link>
      <router-link to="/favorites">收藏夹</router-link>
      <router-link to="/cart">购物车</router-link>
      <router-link to="/orders">历史订单</router-link>
    </div>
    <div class="account">
      <router-link to="/profile">个人账号</router-link>
      &nbsp;
      <router-link to="/login">登录/注册</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar'
};
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffc0cb; /* 修改背景颜色为粉红色 */
  color: white; /* 文字颜色为白色 */
  padding: 10px 20px;
  border-bottom: 2px solid #ff69b4; /* 添加底部边框为更深的粉红色 */
}

.logo {
  font-size: 24px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-size: 20px; /* 调整为更大的字体 */
}

.nav-links a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

.account {
  font-size: 16px; /* 调整为更小的字体 */
  cursor: pointer; /* 添加鼠标指针样式 */
}

.account a {
  display: inline-block;
  padding: 8px 16px;
  background-color: #ff69b4; /* 按钮背景颜色为更深的粉红色 */
  color: white;
  text-decoration: none;
  border-radius: 4px; /* 圆角 */
  transition: background-color 0.3s ease; /* 过渡效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影 */
}

.account a:hover {
  background-color: #ff1493; /* 悬停时的背景颜色为更浅的粉红色 */
  text-decoration: none; /* 去掉下划线 */
}
</style>